<template>
	<view class="confirm">
		<index-header  color="#2a7a5a" title="结算" :hassearch="false"></index-header>
		<view class="confirm-address">
			<view class="confirm-address-left">
				<view class="name">
					<view class="name-text">
						张三
					</view>
					<view class="name-number">
						132****2333
					</view>
				</view>
				<view class="address">
					北京 北京市 朝阳区 木子物灵秘密研究基地 信息与系统集成大楼 (000000)
				</view>
			</view>
			<view class="confirm-address-right">
				<image src="../../../static/icon/left-arrow-2a7a5a.svg" mode=""></image>
			</view>
		</view>
		<view class="confirm-list">
			<view class="confirm-list-item">
				<view class="item-image">
					<image src="../../../static/uploadfiles/shaobing.jpg" mode=""></image>
				</view>
				<view class="item-info">
					<view class="item-info-title">
						黄山烧饼
					</view>
					<view class="item-info-tag">
						咸香味
					</view>
					<view class="item-info-price">
						<view class="price-now">
							￥26
						</view>
						<view class="price-num">
							X1
						</view>
					</view>
				</view>
			</view>
			<view class="confirm-list-item">
				<view class="item-image">
					<image src="../../../static/uploadfiles/niurou.jpg" mode=""></image>
				</view>
				<view class="item-info">
					<view class="item-info-title">
						平遥牛肉
					</view>
					<view class="item-info-tag">
						咸甜味
					</view>
					<view class="item-info-price">
						<view class="price-now">
							￥46
						</view>
						<view class="price-num">
							X1
						</view>
					</view>
				</view>
			</view>
			<view class="confirm-list-coupon">
				<view class="coupon-label">
					优惠券
				</view>
				<view class="coupon-selector">
					<view class="coupon-selector-info">
						可选优惠券1张
					</view>
					<view class="coupon-selector-icon">
						<image src="../../../static/icon/left-arrow-602d29.svg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="confirm-list-total">
				￥72.00
			</view>
		</view>
		<view class="confirm-notes">
			<view class="confirm-notes-label">
				备注
			</view>
			<view class="confirm-notes-textarea">
				<textarea name="" id="" cols="16" rows="3"></textarea>
			</view>
		</view>
		<view class="confirm-type">
			<view class="confirm-type-item">
				<view class="confirm-type-image">
					<image src="../../../static/icon/wechat.jpeg" mode=""></image>
				</view>
				<view class="confirm-type-text">
					微信支付
				</view>
				<view class="confirm-type-select">
					
				</view>
			</view>
			<view class="confirm-type-item">
				<view class="confirm-type-image">
					<image src="../../../static/images/logo.png" mode=""></image>
				</view>
				<view class="confirm-type-text">
					老家积分
				</view>
				<view class="confirm-type-selected">
					<image src="../../../static/icon/selected.svg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="confirm-pay">
			<view class="confirm-pay-label">
				合计：
			</view>
			<view class="confirm-pay-price">
				￥72.00
			</view>
			<view class="confirm-pay-button">
				付款
			</view>
		</view>
	</view>
</template>

<script>
	import indexHeader from '../../../components/indexHeader.vue'
	export default {
		components: {
			indexHeader
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.confirm {
	margin-top: 180rpx;
	background-color: #f5f5f5;
	overflow: hidden;
	&-address {
		height: 200rpx;
		width: 700rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx auto;
		display: flex;
		&-left {
			display: flex;
			flex-direction: column;
		}
		&-right {
			width: 100rpx;
			image {
				display: block;
				width: 80rpx;
				height: 80rpx;
				transform: rotate(180deg);
				margin: 50rpx auto;
			}
		}
		.name {
			margin-top: 20rpx;
			display: flex;
			color: #505050;
			font-size: 36rpx;
			padding: 0 40rpx;
			font-weight: bold;
			&-text {
				margin-right: 40rpx;
			}
		}
		.address {
			margin-top: 20rpx;
			padding: 0 40rpx;
			font-size: 30rpx;
			color: #808080;
		}
	}
	&-list {
		width: 700rpx;
		height: auto;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		&-item {
			margin: 20rpx 0;
			height: 200rpx;
			display: flex;
			.item-image {
				width: 200rpx;
				height: 200rpx;
				margin: 0 20rpx 0 30rpx;
				image {
					display: block;
					margin: 10rpx auto;
					width: 180rpx;
					height: 180rpx;
					border-radius: 20rpx;
				}
			}
			.item-info {
				display: flex;
				flex-direction: column;
				&-title {
					color: #505050;
					font-size: 36rpx;
					font-weight: bold;
				}
				&-tag {
					background-color: #f1f1f1;
					color: #505050;
					font-size: 20rpx;
					width: 70rpx;
					height: 40rpx;
					border-radius: 10rpx;
					line-height: 40rpx;
					text-align: center;
					margin-top: 20rpx;
				}
				&-price {
					margin-top: 20rpx;
					width: 420rpx;
					display: flex;
					justify-content: space-between;
					.price-now {
						color: #1f8551;
						font-size: 34rpx;
					}
					.price-num {
						font-size: 34rpx;
						color: #a6a6a6;
					}
				}
			}
		}
		&-coupon {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			color: #505050;
			font-size: 30rpx;
			line-height: 50rpx;
			.coupon-label {
				margin-left: 30rpx;
			}
			.coupon-selector {
				display: flex;
				margin-right: 30rpx;
				&-icon {
					width: 50rpx;
					height: 50rpx;
					image {
						width: 100%;
						height: 100%;
						transform: rotate(180deg);
					}
				}
			}
		}
		&-total {
			margin: 20rpx 30rpx;
			text-align: right;
			font-size: 40rpx;
			color: #012816;
			font-weight: bold;
		}
	}
	&-notes {
		width: 700rpx;
		height: 200rpx;
		margin: 20rpx auto;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 20rpx;
		&-label {
			font-size: 30rpx;
			color: #505050;
			margin: 20rpx 0 0 20rpx;
		}
		&-textarea {
			margin: 20rpx;
			width: 660rpx;
			textarea {
				width: 100%;
				height: 100rpx;
			}
		}
	}
	&-type {
		width: 700rpx;
		border-radius: 20rpx;
		margin: 20rpx auto;
		background-color: #fff;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		&-item {
			margin-top: 10rpx;
			display: flex;
		}
		&-image {
			width: 70rpx;
			height: 60rpx;
			margin: 20rpx 20rpx 0;
			image {
				width: 100%;
				height: 100%;
			}
		}
		&-text {
			margin: 20rpx 0;
			flex-grow: 1;
		}
		&-select {
			width: 45rpx;
			height: 45rpx;
			margin: 20rpx 40rpx 30rpx 0;
			border-radius: 50%;
			border: 1px solid #909090;
		}
		&-selected {
			width: 40rpx;
			height: 40rpx;
			margin: 20rpx 40rpx 30rpx 0;
			border-radius: 50%;
			background-color: #909090;
			padding: 5rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	&-pay {
		width: 650rpx;
		height: 100rpx;
		border-radius: 40rpx;
		background-color: #10ca7a;
		margin: 40rpx auto;
		display: flex;
		color: #fff;
		line-height: 100rpx;
		font-size: 36rpx;
		&-label {
			margin-left: 40rpx;
		}
		&-price {
			margin-left: 10rpx;
			font-weight: bold;
			flex-grow: 1;
		}
		&-button {
			width: 200rpx;
			height: 60rpx;
			font-weight: bold;
			line-height: 60rpx;
			text-align: center;
			background-color: #a4f1d2;
			color: #2a7a5a;
			border-radius: 40rpx;
			margin: 20rpx 40rpx;
		}
	}
}
</style>
